<template>
	<scroller  ref="test" class="wrapper" :style="{height: viewHeight}">
		<text @disappear="tabbarState('up')" @appear="tabbarState('')" class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}iii{{viewHeight}}</text>
		<text @click="addNumber" class="text" :style="{color:color}">点击我增加数量</text>
		<text @click="minusNumber" class="text" :style="{color:color}">点击我减少数量</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<input style="height:70;font-size:30;" type="tel" placeholder="请输入需要设置的数量" @change="record" maxlength="2"></input>
		<text @click="setNumber" class="text" :style="{color:color}">点击设置数量</text>
		<text class="text" :style="{color:color}">{{text}}1</text>
		<text class="text" :style="{color:color}">{{text}}2</text>
		<text class="text" :style="{color:color}">{{text}}3</text>
		<text class="text" :style="{color:color}">{{text}}4</text>
		<text class="text" :style="{color:color}">{{text}}5</text>
		<text class="text" :style="{color:color}">{{text}}6</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" style="color:#000">{{text}}17</text>
		<text class="text" :style="{color:color}">{{text}}16</text>
		<text class="text" :style="{color:color}">{{text}}15</text>
		<text class="text" :style="{color:color}">{{text}}14</text>
		<text class="text" :style="{color:color}">{{text}}13</text>
		<text class="text" :style="{color:color}">{{text}}12</text>
		<text class="text" :style="{color:color}">{{text}}11</text>
		<text class="text" :style="{color:color}">{{text}}10</text>
		<text class="text" :style="{color:color}">{{text}}9</text>
		<text class="text" :style="{color:color}">{{text}}8</text>
		<text class="text" :style="{color:color}">{{text}}7</text>
		<text class="text" :style="{color:color}">{{text}}6</text>
		<text class="text" :style="{color:color}">{{text}}5</text>
		<text class="text" :style="{color:color}">{{text}}4</text>
		<text class="text" :style="{color:color}">{{text}}3</text>
		<text class="text" :style="{color:color}">{{text}}2</text>
		<text class="text" :style="{color:color}">{{text}}1</text>
	</scroller>
</template>

<style>
	.wrapper {
		/*align-items: center; */
		/*justify-content: center;*/
	}
	.text {
		font-size:60;
		font-weight: bold;
	}
</style>

<script>
    const dom = weex.requireModule('dom')
    module.exports = {
        props: {
            viewHeight:{ default: '0px' },
            color: { default:'#ff0000'},
            text: { default:''},
            input:{ default:""},
        },
        data: {
        },
        created: function() {
            this.color = '#694e4e';
            this.text = 'This is Tab 1 Test.';
        },
        methods:{
            tabbarState(data){
                this.$emit("State",{
                    state:data==="up"?"hide":"show"
                });
            },
            addNumber(){
                this.$emit("addGoodsNumber",{
                    value:1,
                    action:"add",
                    target:2
                });
            },
            minusNumber(){
                this.$emit("addGoodsNumber",{
                    value:1,
                    action:"minus",
                    target:2
                });
            },
            setNumber(){
                this.$emit("addGoodsNumber",{
                    value:this.input,
                    action:"set",
                    target:2
                });
            },
            record(e){
                this.input = e.value;
            }
        }
    }
</script>